<template>
  <div>
    <div class="block">
      <header class="el-header" style="height: auto;">
        <h2 class="title">短期/手术消耗管理</h2>
      </header>
      <section class="el-container container-box is-vertical">
        <el-form ref="queryForm" :inline="true" label-position="right" :model="tableQuery">
          <el-row :gutter="40">
            <el-col :span="10">
              <el-form-item label="手术跟台订单号:" prop="orderCode">
                <el-input v-model="tableQuery.orderCode" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="8" style="margin-left:50px">
              <el-form-item label="消耗单状态:" prop="orderStatus" style="margin-left:-46px">
                <el-select v-model="tableQuery.orderStatus" placeholder="请选择">
                  <el-option label="待提交" value="1" />
                  <el-option label="待平台审核" value="2" />
                  <el-option label="待确认" value="3" />
                  <el-option label="待发货" value="6" />
                  <el-option label="待收货" value="7" />
                  <el-option label="部分收货" value="8" />
                  <el-option label="已完成" value="9" />
                  <el-option label="已取消" value="10" />
                  <el-option label="校验失败" value="11" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="19">
              <div />
            </el-col>
            <el-col :span="10" style="margin-left:42px">
              <el-form-item label="手术日期:">
                <el-date-picker
                  v-model="tableQuery.commitDateStart"
                  type="date"
                  placeholder="开始日期"
                  style="width:150px"
                ></el-date-picker>
                <el-date-picker
                  v-model="tableQuery.commitDateEnd"
                  type="date"
                  placeholder="结束日期"
                  :picker-options="pickerOptions1"
                  style="width:150px"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" style="margin-left:-52px">
              <el-form-item label="订单模板名称:" prop="pruductLineName">
                <el-input type="text"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button @click="queryFormReset">重置</el-button>
                <el-button type="primary" @click="queryFormQuery">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </section>
    </div>
    <div class="block">
      <section>
        <el-editable :data="payload" :columns="columns">
          <template slot="default-orderStatusName" slot-scope="scope">
            <span
              v-if="scope.row.orderStatus === 3"
              class="failColor"
              @click="showDialog(scope.row)"
            >{{ scope.row.orderStatusName }}</span>
            <span v-if="scope.row.orderStatus !== 3">{{scope.row.orderStatusName}}</span>
          </template>
          <template slot="default-action" slot-scope="scope">
            <el-button
              v-if="scope.row.orderStatus === 3"
              type="text"
              @click="sureDialog(scope.row)"
            >确认</el-button>
            <el-button type="text" @click="checkDetail(scope.row)">查看</el-button>
          </template>
        </el-editable>
        <!-- 确认 -->
        <el-dialog
          title="确认短期/手术跟台消耗单"
          :modal="true"
          :fullscreen="fullscreen"
          custom-class="dialog-custom"
          :visible.sync="sureDialogVisible"
          width="50%"
        >
          <h2>对此消耗单进行确认?</h2>
          <div class="delBtn" @click="concelSure">
            <el-button>取消</el-button>
            <el-button type="primary" @click="sure">确认</el-button>
          </div>
        </el-dialog>
      </section>
    </div>
  </div>
</template>

<script src="./index.js"></script>

<style lang="less" src="./index.less" scoped></style>
